* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li, a {
  list-style: none;
  text-decoration: none;
  color: black;
}

img {
  width: 100%;
  display: block;
}

//变量
$bgColor: #414650;
$header_bg: #414650;
$bg: #e6e6e6;

//mixin
//flex
@mixin flex($justify: space-between, $direction: row) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: center;
}


html, body {
  width: 100vw;
  background-color: $bgColor;
}

// header
header {
  $header_i_size: 5.33vmin; /* 40/7.5 */
  $nav_i_size: 9.33vmin; /* 70/7.5 */
  $fontsize: 4vmin; /* 30/7.5 */

  width: 100vw;
  background-color: $header_bg;

  & p, i, div {
    color: white;
    font-size: $fontsize;
  }

  & .header {
    width: 100vw;
    padding: 3.07vmin 4.4vmin; /* 23/7.5 33/7.5 */
    & div {
      @include flex;
    }

    @include flex;

    & i {
      font-size: $header_i_size !important;
      margin-right: 2.93vmin;
    }

    & div:last-child i {
      margin-right: 5.2vmin;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  & .header_nav {
    @include flex;

    & i {
      font-size: $nav_i_size !important;
    }

    & li {
      width: 25%;

      & a > div {
        @include flex(space-between, column);
        padding: 5.33vmin 6.4vmin 8.53vmin;

        & p {
          margin-top: $fontsize;
        }

        & .user_avatar {
          width: $nav_i_size;
          height: $nav_i_size;
          position: relative;

          & img {
            width: 100%;
            height: 100%;
            border: 2px solid #eee;
            border-radius: 50%;
            position: absolute;
          }

        }
      }
    }
  }

}

//main
main {
  background-color: #f5f5f9;
  margin-bottom: 13.33vmin;
  overflow: auto;
}

//section
section {
  $i_size: 6.93vmin;
  $font_size: 3.33vmin;
  $power_size: 25vw;

  & ul {
    display: grid;
    background-color: #e6e6e6;
    grid-template-columns: repeat(4, $power_size);
    grid-template-rows: repeat(3, $power_size);

    & li {
      background-color: #ffffff;
      border-style: solid;
      border-color: $bg;
      border-width: 0 1px 1px 0;
      padding-bottom: 1px;

      &:nth-child(4n) {
        border-right-width: 0;
      }

      & a {
        display: block;
      }

      & .section_power_box {
        width: $power_size;
        height: $power_size;
        @include flex(center, column);

        & i {
          font-size: 6.93vmin;
        }

        & p {
          margin-top: 3.07vmin;
        }
      }
    }
  }
}

.guanggao {
  background-color: #ffffff;
  border-width: 1px 0;
  border-style: solid;
  border-color: $bg;
  margin: 4.27vw 0;

  @include flex(space-around);

  & img {
    width: auto;
    height: 22.53vmin;
  }

  & div {
    font-size: 3.6vmin;
    @include flex(normal, column);
    align-items: end;

    & h1 {
      font-size: 5.6vmin;
      margin-bottom: 2.67vmin;

      & span {
        color: #fb6d76;
      }
    }

    & p {
      color: #bbbec1;
    }
  }
}

//footer
footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  border-top: 1px solid $bg;
  background-color: #fff;
  padding: 2.27vmin 0 1.73vmin;

  .footer_nav {
    & ul {
      @include flex;

      & li {
        flex: 1;
      }
    }
  }
}

.footer_nav_box {
  @include flex(space-between, column);

  & i {
    font-size: 5.87vmin;
  }
}

.show_foot_nav {
  color: #02abee;
}
